<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>我的简历</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background: #eee;
      margin: 20px 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1em;
    }
  </style>
  <style media="print">
    body {
      margin: 0;
    }

    .page2 {
      page-break-before: always;
      margin-top: 30px;
    }
  </style>
  <style>
    body {}

    p {
      margin: .3em 0;
    }

    h1 {
      font-size: 25px;
      margin-top: 0;
    }

    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    strong {
      font-weight: normal;
      color: #f60;
    }

    a {
      color: #999;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    p,
    li {
      color: #666;
    }

    strong {
      font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }

    .bio {
      position: relative;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>

  <style>
    .projects {}

    .projects p {
      color: #666;
    }

    .projects strong {
      color: #f60;
    }

    .projects>ol {
      margin-top: 0;
      list-style-position: inside;
      padding: 0;
    }

    .projects>ol>li {
      margin-bottom: 24px;
    }

    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .projects>ol>li h3 {
      display: inline-block;
    }
  </style>
  <style>
    .skills {}

    #skills {

      width: 500px;
      height: 270px;
    }
    @media print {
      #skills{}
    }


    .skills>.wrapper {
      display: flex;
      justify-content: space-between;
    }

    .skills>.wrapper>:first-child {
      margin-right: 24px;
    }

    .skills>.wrapper>#skills {}

    .skills>.wrapper>ul {
      color: #666;
    }

    .skills>.wrapper strong {
      color: #f60;
    }

    .skills>.wrapper>ul>li {
      line-height: 1.2;
      margin-bottom: 8px;
    }
  </style>
  <style>
    .openSource {}

    .openSource>h2 {}

    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }

    .openSource>ul {}

    .openSource>ul>li {
      margin-bottom: 24px;
    }

    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }

    .openSource h3 {}
  </style>
  <style>
    .jobs {}

    .jobs>h2 {}

    .jobs>ol {}

    .jobs>ol>li {
      margin: 12px 0;
    }

    .jobs header {
      display: flex;
      color: #666;
      margin-bottom: 12px;
    }

    .jobs header>h3 {
      font-size: 18px;
      color: #333;
    }

    .jobs header>h4 {
      margin-left: 1em;
      font-size: 18px;
    }

    .jobs header>span {
      font-size: 18px;
      margin-left: auto;
    }
  </style>



  <style>
    @media (max-width: 500px) {
      body {
        margin: 0;
      }

      article {
        width: auto;
        height: auto;
      }

      .bio img {
        display: none;
      }

      .skills .wrapper {
        flex-direction: column;
      }

      #skills {
        width: auto;
      }
      .jobs header{
        flex-direction: column;
      }
      .jobs header >h3,
      .jobs header >h4,
      .jobs header >span {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <article>
    <section class="bio">
      <h1>杨康</h1>
      <p>
        男 | 25岁 | 前端开发工程师 | 上海
      </p>
      <p>
        手机：17601239764 | 微信：barvo_yk | 邮箱：1024641018@qq.com
      </p>
    </section>






    <section class="projects">
      <h2>项目经历</h2>
      <ol>
        <li>
          <header>
            <h3>we-better-ui</h3>
            <span>
              <a href="https://gitee.com/lonersyk/we-better-component-library">源码链接</a>
              <a href="https://www.npmjs.com/package/we-better-ui">npm链接</a>
            </span>
          </header>
          <p>
            一款基于 <strong>Vue</strong>  / <strong>Webpack</strong> 的 UI 框架。

          </p>
          <p>
            主要组件有button、input输入框、<strong>dialog弹出框</strong>、form表单、chekckBox等等。

          </p>
          <p>
            已上传至npm，之后也将更新组件，并用<strong>TypeScript</strong> 进行重构。

          </p>
          <p>
            制作过程让我对 组件的封装 和单元测试有了新的认识。
            使我对vue中的组件的运用更加熟练
          </p>
        </li>
        <li>
          <header>
            <h3>后台管理系统</h3>
            <span>
              <a href="https://gitee.com/lonersyk/vue-admin">源码链接</a>
            </span>
          </header>
          <p>
            这是一个基于 <strong>Vue</strong> 和 <strong>element-ui</strong> ,vueX,vue-router和axios完成的管理系统。
          </p>
          <p>
            主要功能包括用户登录验证、富文本编辑、员工信息管理、信息分类管理。
          </p>
          
        </li>
        <li>
          <header>
            <h3>王者荣耀h5端</h3>
            <span>
              <a href="https://gitee.com/lonersyk/glory-of-kings">源码链接</a>
            </span>
          </header>
          <p>
            一个基于 <strong>Vue</strong> / <strong>vueX</strong> / <strong>vue-router</strong> /<strong>element-ui</strong> 的移动端单页面应用。
          </p>

          <p>
            该项目后端使用 <strong>node</strong> 和 <strong>MongoDB</strong>进行开发
          </p>
          <p>
            后台管理和h5前端页面使用了vue+element-ui+vueX+vue-router完成
          </p>
          <p>
            该项目使我对node和MongoDB有了初步的了解
          </p>
        </li>




        <li>
          <header>
            <h3>云音乐小程序</h3>
            <span>
              <a href="https://gitee.com/lonersyk/music-socity">源码链接</a>
            </span>
          </header>
          <p>
            是由微信开发者工具开发的<strong>小程序</strong>，通过github上提供的接口获取了网易云的歌曲数据
          </p>
          <p>
            该项目使我对微信开发有了初步的了解，后续也熟悉了uni-app的使用
          </p>
        </li>
      </ol>
    </section>


    <section class="skills">
      <h2>技能</h2>
      <div class="wrapper">
        <div id="skills"></div>
        <ul>
          <li>熟悉页面制作技巧</li>
          <li>熟悉<strong>前后端分离</strong>技术，包括 AJAX、跨域、前端路由、Cookie、Session 等</li>
          <li>熟练掌握 <strong>Vue全家桶</strong>的使用，包括 VueCli、VueRouter、Vuex 等</li>
          <li>熟悉 ES6，包括 let / Promise / await / 解构赋值</li>
          <li>了解 <strong>小程序</strong> 的基本开发</li>
          <li>了解 <strong>node</strong> 的使用</li>
          <li>了解 <strong>Webpack 的配置和优化</strong></li>
          <li>对新技术有强烈兴趣，并在读<strong>源码</strong>进行总结</li>
        </ul>
      </div>
    </section>

    <section class="openSource page2">
      <h2>开源项目</h2>
      <ul>
        <li>
          <header>
            <h3>自己手写dom的一些练习</h3>
            <a href="https://gitee.com/lonersyk/js-exercise">源码链接</a>
          </header>
          <p>实现了元素选择、元素创建、<strong>事件委托</strong>、<strong>深拷贝</strong>、<strong>节流防抖</strong>等等</p>
        </li>
        
      </ul>
    </section>

    <section class="education">
      <h2>最高学历</h2>
      <p>上海建桥学校 计算机科学与技术 本科</p>
    </section>

  </article>
  <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>